<template>
  <div style="padding: 20px">
    <!-- 应收计划审批 -->
    <a-card :bordered="false" style="height: 800px">
      <a-form layout="inline" :model="formState" ref="formRef">
        <a-form-item label="申请时间" name="apply">
          <a-range-picker
            allowClear
            v-model:value="formState.apply"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="审批时间" name="approval">
          <a-range-picker
            allowClear
            v-model:value="formState.approval"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="审批人" name="examinePersonId">
          <a-input
            v-model:value="formState.examinePersonId"
            autocomplete="off"
          />
        </a-form-item>
        <a-form-item label="审批状态" name="examineStatus">
          <a-input v-model:value="formState.examineStatus" autocomplete="off" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click.prevent="onSubmit">查询</a-button>
          <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        bordered
        size="middle"
        :row-class-name="
          (_record: any, index: number) =>
            index % 2 === 1 ? 'table-striped' : null
        "
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 3000, y: 550 }"
        style="margin-top: 20px"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'active'">
            <a-button
              type="link"
              :disabled="record.examineStatus != 0"
              @click="onEdit(record, '同意')"
              >同意</a-button
            >
            <a-button
              type="link"
              danger
              :disabled="record.examineStatus != 0"
              @click="onEdit(record, '拒绝')"
              >拒绝</a-button
            >
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 同意 -->
    <a-modal
      v-model:open="isConsentOpen"
      width="1000px"
      title="操作审批"
      @ok="ConsentOk"
    >
      <a-textarea
        v-model:value="TextValue"
        placeholder="请输入审批意见"
        :rows="4"
      />
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, ref, computed } from 'vue';
import { message } from 'ant-design-vue';
import {
  getExamineList,
  agreeInsertExamine,
  agreeUpdateExamine,
  agreeDeleteExamine,
} from '#/api/core/planAudit';
const formState = reactive({
  apply: [], // 申请时间
  approval: [], // 审批时间
  examinePersonId: '', // 审批人
  examineStatus: '', // 审批状态
});
// 查询和重置
const formRef = ref();
const onSubmit = () => {
  GetData();
  console.log(toRaw(formState));
};
const resetForm = () => {
  formRef.value.resetFields();
};

// 弹窗
interface row {
  id: string;
  foreignKey: string;
  examineType: string;
}
const isConsentOpen = ref(false); // 同意弹窗
const TextValue = ref(''); // 审批意见
const ApprovalType = ref(''); // 审批类型
const rowData = ref(<row>{}); // 当前行数据
const onEdit = (data: any, type: string) => {
  if (type === '同意') {
    rowData.value = data;
    isConsentOpen.value = true;
    TextValue.value = '';
    ApprovalType.value = type;
  } else if (type === '拒绝') {
    rowData.value = data;
    isConsentOpen.value = true;
    TextValue.value = '';
    ApprovalType.value = type;
  }
};

const ConsentOk = async (e: MouseEvent) => {
  if (ApprovalType.value === '同意') {
    if (rowData.value.examineType === '新增') {
      let res = await agreeInsertExamine({
        foreignKey: rowData.value.foreignKey,
        id: rowData.value.id,
        examineOpinion: TextValue.value,
        examineStatus: 1,
      });
      console.log(res);
      if (res.data.code === 200) {
        message.success(res.data.msg || '操作成功');
      } else {
        message.error(res.data.msg || '操作失败');
      }
      GetData();
    } else if (rowData.value.examineType === '修改') {
      let res = await agreeUpdateExamine({
        foreignKey: rowData.value.foreignKey,
        id: rowData.value.id,
        examineOpinion: TextValue.value,
        examineStatus: 1,
      });
      console.log(res);
      if (res.data.code === 200) {
        message.success(res.data.msg || '操作成功');
      } else {
        message.error(res.data.msg || '操作失败');
      }
      GetData();
    } else {
      let res = await agreeDeleteExamine({
        foreignKey: rowData.value.foreignKey,
        id: rowData.value.id,
        examineOpinion: TextValue.value,
        examineStatus: 1,
      });
      console.log(res);
      if (res.data.code === 200) {
        message.success(res.data.msg || '操作成功');
      } else {
        message.error(res.data.msg || '操作失败');
      }
      GetData();
    }
  } else {
    if (rowData.value.examineType === '新增') {
      let res = await agreeInsertExamine({
        foreignKey: rowData.value.foreignKey,
        id: rowData.value.id,
        examineOpinion: TextValue.value,
        examineStatus: 2,
      });
      console.log(res);
      if (res.data.code === 200) {
        message.success(res.data.msg || '操作成功');
      } else {
        message.error(res.data.msg || '操作失败');
      }
      GetData();
    } else if (rowData.value.examineType === '修改') {
      let res = await agreeUpdateExamine({
        foreignKey: rowData.value.foreignKey,
        id: rowData.value.id,
        examineOpinion: TextValue.value,
        examineStatus: 2,
      });
      console.log(res);
      if (res.data.code === 200) {
        message.success(res.data.msg || '操作成功');
      } else {
        message.error(res.data.msg || '操作失败');
      }
      GetData();
    } else {
      let res = await agreeDeleteExamine({
        foreignKey: rowData.value.foreignKey,
        id: rowData.value.id,
        examineOpinion: TextValue.value,
        examineStatus: 2,
      });
      console.log(res);
      if (res.data.code === 200) {
        message.success(res.data.msg || '操作成功');
      } else {
        message.error(res.data.msg || '操作失败');
      }
      GetData();
    }
  }

  isConsentOpen.value = false;
};

// 表格数据
const dataSource = ref();
const columns = ref([
  {
    title: '公司名称',
    dataIndex: 'comName',
    key: 'comName',
    align: 'center',
  },
  {
    title: '小区名称',
    dataIndex: 'villageName',
    key: 'villageName',
    align: 'center',
  },
  {
    title: '小区类型',
    dataIndex: 'villageType',
    key: 'villageType',
    align: 'center',
  },
  {
    title: '收费期',
    dataIndex: 'year',
    key: 'year',
    align: 'center',
  },
  {
    title: '计划应收全费户数',
    dataIndex: 'rcvbFullHouses',
    key: 'rcvbFullHouses',
    align: 'center',
  },
  {
    title: '计划应收全费面积',
    dataIndex: 'rcvbFullArea',
    key: 'rcvbFullArea',
    align: 'center',
  },
  {
    title: '计划应收全费金额',
    dataIndex: 'rcvbFullMoney',
    key: 'rcvbFullMoney',
    align: 'center',
  },
  {
    title: '计划应收基本费户数',
    dataIndex: 'rcvbBaseHouses',
    key: 'rcvbBaseHouses',
    align: 'center',
  },
  {
    title: '计划应收基本费面积',
    dataIndex: 'rcvbBaseArea',
    key: 'rcvbBaseArea',
    align: 'center',
  },
  {
    title: '计划应收基本费金额',
    dataIndex: 'rcvbBaseMoney',
    key: 'rcvbBaseMoney',
    align: 'center',
  },
  {
    title: '申请时间',
    dataIndex: 'applyForTime',
    key: 'applyForTime',
    align: 'center',
  },
  {
    title: '申请人员',
    dataIndex: 'applyForPersonName',
    key: 'applyForPersonName',
    align: 'center',
  },
  {
    title: '审批状态',
    dataIndex: 'examineStatus',
    key: 'examineStatus',
    align: 'center',
    // 当前行的值，当前行数据，行索引  审批状态 0审批中 1同意 2拒绝
    customRender: (text, record, index) =>
      text.record.examineStatus === 0
        ? '审批中'
        : text.record.examineStatus === 1
          ? '同意'
          : '拒绝',
  },
  {
    title: '审批类型',
    dataIndex: 'examineType',
    key: 'examineType',
    align: 'center',
  },
  {
    title: '审批人员',
    dataIndex: 'examinePersonName',
    key: 'examinePersonName',
    align: 'center',
  },
  {
    title: '审批时间',
    dataIndex: 'examinePersonTime',
    key: 'examinePersonTime',
    align: 'center',
  },
  {
    title: '审批意见',
    dataIndex: 'examineOpinion',
    key: 'examineOpinion',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'active',
    key: 'active',
    align: 'center',
    fixed: 'right',
  },
]);

// 默认分页
const current = ref(1); // 当前页码
const total = ref(0); // 总条数
const pageSize = ref(10); // 每页条数
// 分页
const pagination = computed(() => ({
  total: total.value,
  current: current.value,
  pageSize: pageSize.value,
}));
const handleTableChange = (pag: { current: number; pageSize: number }) => {
  console.log('分页参数', pag);
  current.value = pag.current;
  pageSize.value = pag.pageSize;
  GetData(); // 获取表格数据
};

// 获取表格数据
const GetData = async () => {
  let res = await getExamineList({
    applyForTimeStart: formState.apply?.[0] ?? '',
    applyForTimeEnd: formState.apply?.[1] ?? '',
    examinePersonTimeStart: formState.approval?.[0] ?? '',
    examinePersonTimeEnd: formState.approval?.[1] ?? '',
    examinePersonId: formState.examinePersonId,
    examineStatus: formState.examineStatus,
    page: current.value,
    limit: pageSize.value,
  });
  console.log(res);
  dataSource.value = res.data.data;
  total.value = res.data.total;
};
GetData();
</script>

<style scoped></style>
